<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body {
      /* background: #333; */
      font-size: 14px;
      font-family: "微软雅黑"
    }

    a {
      color: #333;
      text-decoration: none;
    }

    .jq22 {
      width: 400px;
      height: auto;
      margin: 0 auto;
      overflow: hidden;
      text-align: left;
      background: #fff;
      padding: 5px;
    }

    .jq22 ul.list {
      overflow: hidden;
      width: 400px;
      margin: 0 auto;
      padding: 10px;
      box-sizing: border-box;
    }

    .jq22 ul.list li img {
      width: 100%;
      height: 100%;
    }


    .jq22 .more {
      overflow: hidden;
      padding: 10px;
      text-align: center;
    }

    .jq22 .more a {
      display: block;
      width: 200px;
      padding: 8px 0;
      color: #6c96d0;
      margin: 0 auto;
      /* background: #333; */
      text-align: center;
      border-radius: 3px;
      border: 1px solid #6c96d0;
    }

    .jq22 .tit {
      font-size: 15px;
    }

    .jq22 .time {
      color: #6c96d0;
      font-size: 12px;
    }

    .jq22 .detail {
      font-size: 12px;
      color: rgb(102, 102, 102);
    }

    .jq22 .item {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0px 2px 6px rgb(182, 182, 182);
      margin-bottom: 20px;
    }

    .jq22 .goDetail{
      display: block;
    }

    /* tab栏 */

    .app {
      width: 400px;
      margin: 0 auto;
      height: 50px;
      background-color: rgba(48, 48, 48, .8);
    }

    .app .box {
      position: relative;
      width: 300px;
      height: 50px;
      margin: 0 auto;
    }

    .app .top {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-around;
      align-items: center;
      background-color: rgb(48, 48, 48);

    }

    .app .select,
    .app .add {
      width: 20px;
      height: 20px;
    }

    .app .add {
      cursor: pointer;
    }

    .app .cont {
      color: #fff;
    }

    /* 下拉框 */
    .app .bot {
      display: none;
      position: absolute;
      width: 100%;
      height: auto;
      background-color: rgba(48, 48, 48);
    }

    .app .show {
      display: block;
    }

    .app .list {
      text-align: center;
      padding: 10px;
    }

    .app .list li {
      margin-bottom: 10px;
      color: #fff;
      cursor: pointer;
    }

    .app .item,
    .cont {
      font-size: 22px
    }
  </style>
</head>

<body>
  <div class="app">
    <div class="box">
      <div class="top">
        <img class="select" src="https://img.xiaohucloud.com/res/100511/2021/05/17/100511-uLoXQu.png" alt="">
        <p class="cont">企业动态</p>
        <img class="add" src="https://img.xiaohucloud.com/res/100511/2021/04/29/100511-tcuWVz.png" alt="">
      </div>

      <div class="bot">
        <ul class="list">
          <li class="item dynamic">企业动态</li>
          <li class="item news">新闻中心</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="jq22">
    <ul class="list">数据加载中，请稍后...</ul>
    <div class="more"><a href="javascript:;">点击加载更多</a></div>
  </div>

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script>
    $(function () {

      // tab栏
      $('.app .add').on('click', function () {
        $('.app .bot').toggleClass('show')
      })

      $('.app .item').on('click', function (e) {
        console.log(e.target.innerHTML);
        let val = e.target.innerHTML
        $('.app .cont').html(val)
        $('.app .bot').toggleClass('show')

      })



      // ul区域
      const p1 = new Promise((resolve, reject) => {
      $.ajax({
        url: "https://api.xiaohucloud.com/api/data/newsListByCategoryIds",
        data: {
          ids: 1335,
          limit: 999,
          token: '7d0211b65d08407f90e24b40c49e4c7ebRGc4J',
          lang: 'cn',
          type: 2,
          versionId: 2808,
          version_id: 2808,
          companyId: 100511
        },
        type: "GET",
        dataType: "json",
        success: function (data) {
          resolve(data);
        }
      })
    })

    const p2 = new Promise((resolve, reject) => {
      $.ajax({
        url: "https://api.xiaohucloud.com/api/data/newsListByCategoryIds",
        data: {
          ids: 1336,
          limit: 999,
          token: '7d0211b65d08407f90e24b40c49e4c7ebRGc4J',
          lang: 'cn',
          type: 2,
          versionId: 2808,
          version_id: 2808,
          companyId: 100511
        },
        type: "GET",
        dataType: "json",
        success: function (data) {
          resolve(data);
        }
      })
    })


    Promise.all([p1, p2])
      .then(result => {
        // console.log(result)
        let res1 = result[0].data
        console.log(res1);
        let res2 = result[1].data

        let _default = 1; //默认显示li个数
        let _loading = 1;  //每次点击按钮后加载的个数
        let _content = []; //临时存储li循环内容
        let flag = 1 // flag=1时为企业动态
        // 定义加载函数,参数为：加载的个数，数据
        function appendToUl(m, arr) {
          $(".jq22 ul.list").html("");
          for (let i = 0; i < m; i++) {
            let str = `
          <li class="item">
            <a class="goDetail" href="http://m.100511.xiaohucloud.com/news/${arr[i].id}.html">
              <img class="imgs" src="${arr[i].image}" alt="">
              <p class="tit">${arr[i].name}</p>
              <p class="time">${arr[i].add_time}</p>
              <p class="detail">${arr[i].image_text}</p>
            </a>
          </li>
          `

            $('.jq22 .list').append(str)
          }
        }
        // 默认加载
        appendToUl(_default, res1)

        // 点击加载更多
        $('.more').on('click', function () {
          if (flag) {
            appendToUl(res1.length, res1)
            $(this).children('a').html("全部加载完成")
          } else {
            appendToUl(res2.length, res2)
            $(this).children('a').html("全部加载完成")
          }

        })

        // 点击企业动态
        $('.dynamic').on('click', function () {
          $('.more').html('<a href="javascript:;">点击加载更多</a>')
          appendToUl(_default, res1)
          flag = 1
        })
        // 点击新闻中心
        $('.news').on('click', function () {
          $('.more').html('<a href="javascript:;">点击加载更多</a>')
          appendToUl(_default, res2)
          flag = 0
        })

      })
      .catch(e => console.log(e));
    })
  </script>
</body>

</html>